<template>
  <div v-loading="isLoading" class="panel-property">
    <div class="content">
      <el-button class="btn-sure btn-add" icon="CirclePlusFilled" size="default" @click="addUpdateKeys">{{ $demoi18n('panel-data.addingUpdatekeys') }}</el-button>

      <div v-for="(param, index) in form.updateKeys" :key="index" class="form-card">
        <VsFormItem
          :prop="`updateKeys[${index}]`"
          :label="`updateKeys-${index + 1}`"
          :rules="generateRules({ required: true, label: 'updateKeys' })"
        >
          <el-input
            v-model="form.updateKeys[index]"
            :placeholder="$demoi18n('placeholder.enterName')"
            size="default"
          ></el-input>
        </VsFormItem>
        <img class="img-cancel" :src="xvueTheme === 'light' ? cancelLight : cancelDark" @click="deleteItem(index)" />
      </div>
    </div>
  </div>
</template>
<script>
import cancelDark from '@/components/panel-linkage-form-card-new/cancel_dark.png';
import cancelLight from '@/components/panel-linkage-form-card-new/cancel_light.png';
import { generateRules } from '@/utils/rules';
export default {
  name: 'UpdateKeysCard',
  props: {
    dataForm: Object,
    config: Object,
    widgetInstanceId: String,
    orgConfig: Object,
  },
  data() {
    return {
      form: this.dataForm,
      isLoading: false,
      cancelDark,
      cancelLight,
      xvueTheme: window._adoPremise.uc.theme,
    };
  },
  methods: {
    generateRules,
    addUpdateKeys() {
      this.form.updateKeys.push('');
    },
    deleteItem(index) {
      this.form.updateKeys.splice(index, 1);
    },
  },
};
</script>
<style lang="less" scoped>
.panel-property {
  &:hover {
    background-color: unset !important;
  }
  .content {
    padding: 0 10px;
    .btn-add {
      :deep(.el-icon-circle-plus) {
        color: #999;
      }
    }
    .form-card {
      background-color: #f8f8f9;
      padding: 12px 10px;
      margin-top: 10px;
      margin-bottom: 1px;
      position: relative;
      &:hover {
        outline: 1px solid #9cdeff;
        .img-cancel {
          display: block;
        }
      }
      .img-cancel {
        position: absolute;
        top: -10px;
        right: -10px;
        display: none;
        cursor: pointer;
      }
      .el-form-item {
        &:hover {
          background-color: #dbedff;
        }
      }
    }

    .prop-form {
      :deep(.el-form-item) {
        margin-bottom: 0;
      }
    }
  }
}
</style>
